<template>
  <view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
    <text class="back-btn" @click="handleBack" v-if="showBack">←</text>
    <slot v-if="!showBack"></slot>
  </view>
</template>

<script setup lang="ts">
import { useNavBar } from '@/hooks/useNavBar'

interface Props {
  showBack?: boolean
  backAction?: () => void
}

const props = withDefaults(defineProps<Props>(), {
  showBack: true,
  backAction: undefined
})

const { statusBarHeight } = useNavBar()

const handleBack = () => {
  if (props.backAction) {
    props.backAction()
  } else {
    uni.navigateBack()
  }
}
</script>

<style lang="scss" scoped>
/* 固定头部 */
.nav-bar {
  display: flex;
  align-items: center;
  z-index: 20;

  .back-btn {
    font-size: 36rpx;
    color: #fff;
    padding: 16rpx;
    border: 1px solid #fff;
    padding: 3px 25px;
    margin-left: 15px;
    border-radius: 100px;
    background: linear-gradient(90deg, #7b5fff, #a855f7);
    border: none;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
  }
}
</style>
